/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, Dimensions, Image, ScrollView, PixelRatio, TouchableHighlight} from 'react-native';

import {CachedImageBackground} from "react-native-img-cache";

import Common from '../../component/common';

import ToolbarComponent from '../../component/ToolbarComponent';

import Loading from '../../component/loading';

import LoadError from '../../component/loadError';

const totalWidth = Dimensions.get('window').width;

export default class PayResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isBankCard: false,
    };
    this.entity = this.props.did;
  }

  componentWillMount(){
    // this.fetchSpecialColumnData();

  }
  componentDidMount(){
    // this.fetchSpecialColumnData();
  }
  
  render() {
    return (
      <View style={styles.container}>
        <ToolbarComponent
          leftItem={{
            title: 'Back',
            layout: 'icon',
            icon: require("../../images/back.png"),
            onPress: () => {
              Common.onBack(this);
            },
          }}
        >
          <View style={styles.toolbarV}>
            <Text style={styles.toolbarT} numberOfLines={1}>支付结果</Text>
          </View>
        </ToolbarComponent>
        <ScrollView style={{flex: 1}}>
          {
            this.props.name == "true"?
            <View style={styles.payResult}>
              <Image style={styles.payResultIcon} source={require('../../images/pay/pay_check.png')} />
              <Text style={styles.payResultTitle}>支付成功</Text>
              {this.entity?
              <Text style={styles.payResultTips}>请在 我的-我的订阅 中查看已订阅专栏</Text>:null}
            </View>:
            <View style={styles.payResult}>
              <Image style={styles.payResultIcon} source={require('../../images/pay/pay_error.png')} />
              <Text style={styles.payResultTitle}>支付失败</Text>
              <Text style={styles.payResultTips}></Text>
            </View>
          }
          {
            this.entity?
            <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} onPress={() => {Common.onBack(this)}}>
            <View style={styles.subscribeBox}>
              <View style={styles.subscribeLeftBox}>
                <Text style={styles.subscribeLabel}>{this.entity.typeName}</Text>
                <Text style={styles.subscribeTitle}>{this.entity.specialColumnTitle}</Text>
                <Text style={styles.subscribeLabel}>主讲人：{this.entity.userName}</Text>
                <Text style={styles.subscribeLabel}>共{this.entity.totalColumnNumber}期</Text>
              </View>
              {this.entity.specialColumnPic1?
                <CachedImageBackground style={styles.subscribeImg} source={{uri: this.entity.specialColumnPic1}}/>:
                <View style={[styles.subscribeImg,{borderColor: '#ededed', borderWidth: 1/PixelRatio.get()}]}>
                  <Text style={{color: '#ededed',fontSize: 12}}>暂无图片</Text>
                </View>
              }
            </View>
            </TouchableHighlight>:null
          }
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4f4f4',
  },
  toolbarV: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarT: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 20
  },
  payResult: {
    backgroundColor: '#fff',
    height: totalWidth*0.56,
    alignItems: 'center',
    justifyContent: "space-between",
    marginVertical: totalWidth*0.036,
    paddingVertical: totalWidth*0.093,
  },
  payResultIcon: {
    width: totalWidth*0.164,
    height: totalWidth*0.173,
    resizeMode: 'contain', 
  },
  payResultTitle: {
    color: '#000',
    fontSize: 22,
  },
  payResultTips: {
    color: '#000',
    fontSize: 12,
  },
  subscribeBox: {
    backgroundColor: '#fff',
    paddingVertical: totalWidth*0.032,
    paddingHorizontal: totalWidth*0.05,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  subscribeLeftBox: {
    flex: 1,
    justifyContent: 'center'
  },
  subscribeLabel: {
    color: '#000',
    fontSize: 12,
    lineHeight: Math.round(totalWidth*0.053),
  },
  subscribeTitle: {
    color: '#000',
    fontSize: 15,
    fontWeight: 'bold',
    marginVertical: totalWidth*0.01,
  },

  subscribeImg: {
    width: totalWidth*0.2,
    height: totalWidth*0.26,
    alignItems: 'center',
    justifyContent: 'center',
  },
});